<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户分析-内页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-rc.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<body>
<div style="display: flex;flex-direction: row;align-items: center;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main3" style="width: 600px;height:400px;"></div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main2" style="width: 600px;height:400px;"></div>

</div>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '客户来源分析'
        },
        tooltip: {},
        legend: {
            data:['客户来源']
        },
        xAxis: {
            data: ["电话联系","地推联系","主动联系"]
        },
        yAxis: {},
        series: [{
            name: '客户来源',
            type: 'bar',
            data: [5, 20, 36]
        }]
    };
    
    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    var option2 = {
        title: {
            text: '客户会员率分析',
            subtext: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['高级会员', '中级会员', '普通会员']
        },
        series: [
            {
                name: '客户会员率分析',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '高级会员'},
                    {value: 310, name: '中级会员'},
                    {value: 135, name: '普通会员'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };


    // 基于准备好的dom，初始化echarts实例
    var myChart3 = echarts.init(document.getElementById('main3'));

    // 指定图表的配置项和数据
    var option3 = {
        title: {
            text: '客户所属行业分析'
        },
        tooltip: {},
        legend: {
            data:['所属行业']
        },
        xAxis: {
            data: ["计算机行业","金融保险行业","其他行业"]
        },
        yAxis: {},
        series: [{
            name: '所属行业',
            type: 'bar',
            data:[ 8, 15, 13]
        }]
    };
    
    var customerLevels = ['普通会员', '中级会员', '高级会员']
    var levelName = (index) => {
    	return customerLevels[index]
    }
    var barKVSetter = (opt, index, key, val) => {
        opt.xAxis.data[index] = key
        opt.series[0].data[index] = val
    }
    var pieKVSetter = (opt, index, key, val) => {
        opt.legend.data[index] = key
        opt.series[0].data[index] = {value: val, name: key}
    }
    var setter = (opt, list, keyValSetter = barKVSetter, keyHandler = (key) => {return key}) => {
    	let cols = []
    	let vals = []
        list.forEach((entry, index) => {
        	console.log(entry, index)
            keyValSetter(opt, index, keyHandler(entry.key), entry.value)
        })
        console.log(opt)
        return opt
    }
    
    var fd =new FormData();
    let config = {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }
    axios.post('getStatistics', fd, config)
        .then(res => {
        	let datas = res.data.data
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(setter(option, datas.source));
            myChart2.setOption(setter(option2, datas.level, pieKVSetter, levelName));
            myChart3.setOption(setter(option3, datas.industry));
        })
        .catch((e) => {
        	console.error(e);
        });
</script>
</body>
</html>